<template>
  <div class="box-switch">
    <img src="@/assets/images/img-icon14.svg"/>箱体开关开启
    <img src="@/assets/images/img-icon13.svg"/>箱体开关关闭
  </div>
  <div style="position: absolute; top: 50px; left: 10px">
    北 <img src="@/assets/images/img-icon40.svg" width="30" style="vertical-align: middle">
  </div>
  <template v-for="(light,index) in lightData">
    <div class="lamp-wrap" :style="setStyle()"
         :class="'lamp-wrap'+index, bridgeHeight[index].height <= 90 ? 'house-all' : ''">
      <template v-for="(item,index) in light">
        <div class="house" v-if="item.towername"
             :style="{'margin-top': item.towerArea == 2  && item.towerNumber == 5 ? '-200px' :''}">
          <!--   lightType  1：正常 2：异常  4：维修  5：空置  6：朝下     -->
          <template v-for="(opt,i) in item.lightList">
            <div class="lamp" :class="'house-lamp'+opt.lightnameUi" v-if="opt.lightType == 1">
              <img v-if="opt.lightStatus == 1" src="@/assets/images/img-icon6.svg"/>
              <img v-else src="@/assets/images/img-icon5.svg"/>
            </div>
            <div class="lamp" :class="'house-lamp'+opt.lightnameUi" v-else-if="opt.lightType == 2">
              <img src="@/assets/images/img-icon3.svg"/>
            </div>
            <div class="lamp" :class="'house-lamp'+opt.lightnameUi" v-else-if="opt.lightType == 4">
              <img src="@/assets/images/img-icon4.svg"/>
            </div>
            <div class="lamp lamp-empty" v-else-if="opt.lightType == 5 || opt.lightType == 3">
<!--              <img src="@/assets/images/img-icon7.svg"/>-->
            </div>
            <div class="lamp" :class="'house-lamp'+opt.lightnameUi" v-else-if="opt.lightType == 6">
              <img v-if="opt.lightStatus == 1" src="@/assets/images/img-icon42.svg"/>
              <img v-else src="@/assets/images/img-icon41.svg"/>
            </div>
          </template>
          <div class="lamp-area"></div>
        </div>
        <div v-else class="bridge" :class=" item.brigeArea == 1 ? 'bridge-one' : 'bridge-two' ">
          <template v-for="opt in item._lightList">
            <div class="lamp" :class="'bridge-lamp'+opt.lightnameUi" v-if="opt.lightType == 1">
              <img v-if="opt.lightStatus == 1" src="@/assets/images/img-icon6.svg"/>
              <img v-else src="@/assets/images/img-icon5.svg"/>
            </div>
            <div class="lamp" :class="'bridge-lamp'+opt.lightnameUi" v-else-if="opt.lightType == 2">
              <img src="@/assets/images/img-icon3.svg"/>
            </div>
            <div class="lamp" :class="'bridge-lamp'+opt.lightnameUi" v-else-if="opt.lightType == 4">
              <img src="@/assets/images/img-icon4.svg"/>
            </div>
            <div class="lamp" :class="'bridge-lamp'+opt.lightnameUi" v-else-if="opt.lightType == 6">
              <img v-if="opt.lightStatus == 1" src="@/assets/images/img-icon42.svg"/>
              <img v-else src="@/assets/images/img-icon41.svg"/>
            </div>
          </template>
          <div class="lamp-area"></div>
        </div>
      </template>
      <div class="lamp-btns">
        <div class="item" :class="{ 'lamp-bridge': item.type == 2 }" v-for="item in areaName[index]">
          <div class="box">
            <!--  箱体  -->
            <template v-for="(opt,i) in item.switchList">
              <template v-if="opt.type == 2">
                <div class="txt" v-if="i == 0">{{ opt.switchnameFact }}</div>
                <div class="img">
                  <img v-if="opt.status == 1" src="@/assets/images/img-icon13.svg" width="21"/>
                  <img v-else src="@/assets/images/img-icon14.svg" width="21"/>
                </div>
              </template>
            </template>
          </div>
          <div class="net">
            <!--  网关  -->
            <template v-if="Array.isArray(item.gatewaylist)">
              <span class="lamp-name">{{ item.name }}</span>
              <template v-for="(opt,idx) in item.gatewaylist">
                <span class="status" :class="{ 'online': opt.gatewayOnline == 1 }">
                  <template v-if="opt.gatewayOnline == 1">在线</template>
                  <template v-else>离线</template>
                </span>
              </template>
            </template>
            <template v-else>
              <span class="lamp-name">{{ item.name }}</span>
              <span class="status" :class="{ 'online': item.gatewaylist.gatewayOnline == 1 }">
                <template v-if="item.gatewaylist.gatewayOnline == 1">在线</template>
                <template v-else>离线</template>
              </span>
            </template>
          </div>
        </div>
      </div>
      <div class="lamp-area-name">
        <template v-if="index == 0">一区</template>
        <template v-else-if="index == 1">二区</template>
        <template v-else-if="index == 2">散货码头</template>
      </div>
    </div>
  </template>
</template>

<script>
import {mapGetters} from "vuex";
import {BrigeZongLan, judgeLightOnline, refreshGatewayData, TowerZongLan} from "../../router/api.js";
import { h } from 'vue'

export default {
  name: "index",
  components: {},
  computed: {
    ...mapGetters(['refreshFlag','userInfo']),
  },
  data() {
    return {
      bridgeClass: [],
      lightData: [],
      areaName: [],
      bridgeHeight: [],
      timer: null,
      fetchingFlag: true,
      onSiteList: {}
    }
  },
  watch: {
    'refreshFlag': {
      deep: true,
      handler(n) {
        if(n) {
          this.getLampData();
          refreshGatewayData();

          this.$store.commit('SET_WAIT', true)
        }
      }
    }
  },
  mounted() {
    this.$store.commit('SET_TOPMENU', -1);

    if(this.userInfo.role == 2){
      this.$notify({
        title: '提示',
        duration: 2000,
        offset: 60,
        message: h('div', { style: 'color: #366' }, '请尽量在白天进行检修操作'),
      })
    }

    this.getLampData();

    this.timer = setInterval(() => {
      if(this.fetchingFlag){
        this.getLampData();
      }
    }, 1000 * 5)
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.timer);
    this.timer = null;
    this.fetchingFlag = false;

    next();
  },
  methods: {
    setStyle() {
      let dom = document.querySelector('.lamp-content');
      if (!dom) return;
      let w = this.lightData[1].length * 240 ;
      let boxW = dom.clientWidth - 130;
      let _width = w < boxW ? boxW : w;

      return {
        width: _width + 'px',
      }
    },
    async getLampData() {
      this.fetchingFlag = true;
      // this.onSiteList = {};

      this.bridgeClass = [];
      let towerAreaOne = [], towerAreaTwo = [], towerAreaThree = [];
      let bridgeAreaOne = [], bridgeAreaTwo = [];
      let bridgeHeightOne = [], bridgeHeightTwo = [];
      let areaNameOne = [], areaNameTwo = [], areaNameThree = [];

      let resLamp = await TowerZongLan();
      let resLampBridge = await BrigeZongLan()

      if (resLamp.data.code == 200) {
        let resLampData = JSON.parse(JSON.stringify(resLamp.data.data));
        // console.log('resLampData', resLampData)
        towerAreaOne = resLampData.filter(opt => opt.towerArea == 1);
        towerAreaTwo = resLampData.filter(opt => opt.towerArea == 2);
        towerAreaThree = resLampData.filter(opt => opt.towerArea == 3);
      }else{
        this.$message.warning('无法请求服务器资源，请确认服务器是否开启')
      }
      if (resLampBridge.data.code == 200) {
        let resLampBridgeData = JSON.parse(JSON.stringify(resLampBridge.data.data));
        // console.log('resLampBridgeData', resLampBridgeData)
        bridgeAreaOne = resLampBridgeData.filter(opt => opt.brigeArea == 1);
        bridgeAreaTwo = resLampBridgeData.filter(opt => opt.brigeArea == 2);

        bridgeHeightOne = this.setHeight(bridgeAreaOne);
        bridgeHeightTwo = this.setHeight(bridgeAreaTwo);

        this.bridgeHeight = [bridgeHeightOne, bridgeHeightTwo, {height: 90, length: 0}]
      }

      towerAreaOne.push(...bridgeAreaOne);
      towerAreaTwo.splice(3, 0, ...bridgeAreaTwo)

      if(towerAreaOne.length || towerAreaTwo.length || towerAreaThree.length){
        this.onSiteList = {};
      }

      areaNameOne = this.setAreaName(towerAreaOne, 1);
      areaNameTwo = this.setAreaName(towerAreaTwo, 2);
      areaNameThree = this.setAreaName(towerAreaThree, 3);

      towerAreaOne.sort((a,b) => a.locationUi - b.locationUi)
      towerAreaTwo.sort((a,b) => a.locationUi - b.locationUi)
      towerAreaThree.sort((a,b) => a.locationUi - b.locationUi)

      areaNameOne.sort((a,b) => a.locationUi - b.locationUi)
      areaNameTwo.sort((a,b) => a.locationUi - b.locationUi)
      areaNameThree.sort((a,b) => a.locationUi - b.locationUi)

      this.lightData = [towerAreaOne, towerAreaTwo, towerAreaThree];
      this.areaName = [areaNameOne, areaNameTwo, areaNameThree]
      // console.log('lightData', this.lightData)

      /*let resOnLine = await judgeLightOnline();
      if(resOnLine.data.code == 200){
        let onLine = resOnLine.data.data;
        this.areaName.forEach(item => {
          item.forEach(opt => {
            let is = Array.isArray(opt.gatewaylist);
            if(is){
              opt.gatewaylist.forEach(o => {
                o['onlineStatus'] = onLine[o.gatewayId];
              })
            }else{
              opt.gatewaylist['onlineStatus'] = onLine[opt.gatewaylist.gatewayId];
            }
          })
        })
      }else{
        // this.$message.warning(resOnLine.data.msg)
      }*/

      this.$store.commit('SET_ONSITELIST', this.onSiteList);
      this.$store.commit('SET_REFRESHFLAG', false)
    },
    setHeight(arr) {
      let height = 0, length = 0;
      arr.forEach((item, idx) => {
        let v = item.lightList.filter(opt => opt.lightType != 5);
        item['_lightList'] = v;
        height = v.length / 2 * 20;
        length = v.length;
      })
      return {height, length};
    },
    setAreaName(_arr, type) {
      let tmp = [];
      let site = [];
      let arr = JSON.parse(JSON.stringify(_arr));
      arr.forEach(opt => {
        tmp.push({
          name: opt.towername || opt.brigename,
          locationUi: opt.locationUi,
          status: opt.manual,
          gatewaylist: opt.gatewaylist,
          switchList: opt.switchList
        })

        if(Array.isArray(opt.gatewaylist)){
          site.push(...opt.gatewaylist)
        }else{
          site.push(opt.gatewaylist)
        }
      })
      this.onSiteList[type] = site

      return tmp;
    },
  }

}
</script>

<style scoped lang="scss">
.box-switch {
  position: fixed;
  top: 92px;
  left: 96px;
  display: flex;
  font-size: 16px;
  font-weight: 400;
  color: #336666;

  img {
    width: 21px;
    margin-right: 5px;

    &:last-child {
      margin-left: 25px;
    }
  }
}

.lamp-wrap {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 15px;

  > div:nth-child(1){
    margin-left: 200px;
  }

  .house, .bridge {
    float: left;

    .lamp {
      width: 20px;
      height: 20px;
      position: absolute;
      z-index: 2;
      user-select: none;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .house {
    width: 240px;
    height: 86px;
    position: relative;
    flex-shrink: 0;

    .lamp {
      &.house-lamp1, &.house-lamp2, &.house-lamp3 {
        top: 0;
      }

      &.house-lamp7, &.house-lamp8, &.house-lamp9 {
        top: 70px;
      }

      &.house-lamp1, &.house-lamp9, &.house-lamp13, &.house-lamp21 {
        left: 15px;
      }

      &.house-lamp2, &.house-lamp8, &.house-lamp14, &.house-lamp20 {
        left: 35px;
      }

      &.house-lamp3, &.house-lamp7, &.house-lamp15, &.house-lamp19 {
        left: 55px;
      }

      &.house-lamp10, &.house-lamp11, &.house-lamp12 {
        left: 0;
      }

      &.house-lamp4, &.house-lamp5, &.house-lamp6 {
        left: 70px;
      }

      &.house-lamp4, &.house-lamp12, &.house-lamp16, &.house-lamp24 {
        top: 15px;
      }

      &.house-lamp5, &.house-lamp11, &.house-lamp17, &.house-lamp23 {
        top: 35px;
      }

      &.house-lamp6, &.house-lamp10, &.house-lamp18, &.house-lamp22 {
        top: 55px;
      }

      &.house-lamp13, &.house-lamp14, &.house-lamp15 {
        top: -20px;
      }
      &.house-lamp19, &.house-lamp20, &.house-lamp21 {
        top: 90px;
      }
      &.house-lamp22, &.house-lamp23, &.house-lamp24 {
        left: -20px;
      }
      &.house-lamp16, &.house-lamp17, &.house-lamp18 {
        left: 90px;
      }
    }

    .lamp-empty {
      display: none;
    }

    .lamp-area {
      width: 50px;
      height: 50px;
      background-color: #E7F3F9;
      position: absolute;
      left: 20px;
      top: 20px;
      border-radius: 8px;
      text-align: center;
    }
  }

  .bridge {
    width: 240px;
    position: relative;
    flex-shrink: 0;

    .lamp-area {
      width: 40px;
      background-color: #E7F3F9;
      position: absolute;
      left: 24px;
      top: 10px;
      border-radius: 8px;
    }
  }
}
.lamp-wrap2{
  height: 180px;
  margin-bottom: 0;
}
.bridge-one{
  height: 330px;

  .lamp{
    &.bridge-lamp1,
    &.bridge-lamp2,
    &.bridge-lamp3,
    &.bridge-lamp4,
    &.bridge-lamp5,
    &.bridge-lamp6,
    &.bridge-lamp7,
    &.bridge-lamp8,
    &.bridge-lamp9,
    &.bridge-lamp10,
    &.bridge-lamp11,
    &.bridge-lamp12{
      left: 0
    }
    &.bridge-lamp25,
    &.bridge-lamp26,
    &.bridge-lamp27,
    &.bridge-lamp28,
    &.bridge-lamp29,
    &.bridge-lamp30,
    &.bridge-lamp31,
    &.bridge-lamp32,
    &.bridge-lamp33,
    &.bridge-lamp34,
    &.bridge-lamp35,
    &.bridge-lamp36{
      left: -20px
    }
    &.bridge-lamp13,
    &.bridge-lamp14,
    &.bridge-lamp15,
    &.bridge-lamp16,
    &.bridge-lamp17,
    &.bridge-lamp18,
    &.bridge-lamp19,
    &.bridge-lamp20,
    &.bridge-lamp21,
    &.bridge-lamp22,
    &.bridge-lamp23,
    &.bridge-lamp24{
      left: 70px
    }
    &.bridge-lamp37,
    &.bridge-lamp38,
    &.bridge-lamp39,
    &.bridge-lamp40,
    &.bridge-lamp41,
    &.bridge-lamp42,
    &.bridge-lamp43,
    &.bridge-lamp44,
    &.bridge-lamp45,
    &.bridge-lamp46,
    &.bridge-lamp47,
    &.bridge-lamp48{
      left: 90px
    }
    &.bridge-lamp1, &.bridge-lamp13, &.bridge-lamp25, &.bridge-lamp37{
      top: 0px;
    }
    &.bridge-lamp2, &.bridge-lamp14, &.bridge-lamp26, &.bridge-lamp38{
      top: 20px;
    }
    &.bridge-lamp3, &.bridge-lamp15, &.bridge-lamp27, &.bridge-lamp39{
      top: 40px;
    }
    &.bridge-lamp4, &.bridge-lamp16, &.bridge-lamp28, &.bridge-lamp40{
      top: 60px;
    }
    &.bridge-lamp5, &.bridge-lamp17, &.bridge-lamp29, &.bridge-lamp41{
      top: 80px;
    }
    &.bridge-lamp6, &.bridge-lamp18, &.bridge-lamp30, &.bridge-lamp42{
      top: 100px;
    }
    &.bridge-lamp7, &.bridge-lamp19, &.bridge-lamp31, &.bridge-lamp43{
      top: 120px;
    }
    &.bridge-lamp8, &.bridge-lamp20, &.bridge-lamp32, &.bridge-lamp44{
      top: 140px;
    }
    &.bridge-lamp9, &.bridge-lamp21, &.bridge-lamp33, &.bridge-lamp45{
      top: 160px;
    }
    &.bridge-lamp10, &.bridge-lamp22, &.bridge-lamp34, &.bridge-lamp46{
      top: 180px;
    }
    &.bridge-lamp11, &.bridge-lamp23, &.bridge-lamp35, &.bridge-lamp47{
      top: 200px;
    }
    &.bridge-lamp12, &.bridge-lamp24, &.bridge-lamp36, &.bridge-lamp48{
      top: 220px;
    }
  }
  .lamp-area{
    height: 220px;
  }
}

.bridge-two{
  height: 390px;

  .lamp{
    &.bridge-lamp1,
    &.bridge-lamp2,
    &.bridge-lamp3,
    &.bridge-lamp4,
    &.bridge-lamp5,
    &.bridge-lamp6,
    &.bridge-lamp7,
    &.bridge-lamp8,
    &.bridge-lamp9,
    &.bridge-lamp10,
    &.bridge-lamp11,
    &.bridge-lamp12,
    &.bridge-lamp13,
    &.bridge-lamp14,
    &.bridge-lamp15{
      left: 0;
    }
    &.bridge-lamp31,
    &.bridge-lamp32,
    &.bridge-lamp33,
    &.bridge-lamp34,
    &.bridge-lamp35,
    &.bridge-lamp36,
    &.bridge-lamp37,
    &.bridge-lamp38,
    &.bridge-lamp39,
    &.bridge-lamp40,
    &.bridge-lamp41,
    &.bridge-lamp42,
    &.bridge-lamp43,
    &.bridge-lamp44,
    &.bridge-lamp45{
      left: -20px;
    }
    &.bridge-lamp16,
    &.bridge-lamp17,
    &.bridge-lamp18,
    &.bridge-lamp19,
    &.bridge-lamp20,
    &.bridge-lamp21,
    &.bridge-lamp22,
    &.bridge-lamp23,
    &.bridge-lamp24,
    &.bridge-lamp25,
    &.bridge-lamp26,
    &.bridge-lamp27,
    &.bridge-lamp28,
    &.bridge-lamp29,
    &.bridge-lamp30{
      left: 70px;
    }
    &.bridge-lamp46,
    &.bridge-lamp47,
    &.bridge-lamp48,
    &.bridge-lamp49,
    &.bridge-lamp50,
    &.bridge-lamp51,
    &.bridge-lamp52,
    &.bridge-lamp53,
    &.bridge-lamp54,
    &.bridge-lamp55,
    &.bridge-lamp56,
    &.bridge-lamp57,
    &.bridge-lamp58,
    &.bridge-lamp59,
    &.bridge-lamp60{
      left: 90px;
    }
    &.bridge-lamp1, &.bridge-lamp16, &.bridge-lamp31, &.bridge-lamp46{
      top: 0;
    }
    &.bridge-lamp2, &.bridge-lamp17, &.bridge-lamp32, &.bridge-lamp47{
      top: 20px;
    }
    &.bridge-lamp3, &.bridge-lamp18, &.bridge-lamp33, &.bridge-lamp48{
      top: 40px;
    }
    &.bridge-lamp4, &.bridge-lamp19, &.bridge-lamp34, &.bridge-lamp49{
      top: 60px;
    }
    &.bridge-lamp5, &.bridge-lamp20, &.bridge-lamp35, &.bridge-lamp50{
      top: 80px;
    }
    &.bridge-lamp6, &.bridge-lamp21, &.bridge-lamp36, &.bridge-lamp51{
      top: 100px;
    }
    &.bridge-lamp7, &.bridge-lamp22, &.bridge-lamp37, &.bridge-lamp52{
      top: 120px;
    }
    &.bridge-lamp8, &.bridge-lamp23, &.bridge-lamp38, &.bridge-lamp53{
      top: 140px;
    }
    &.bridge-lamp9, &.bridge-lamp24, &.bridge-lamp39, &.bridge-lamp54{
      top: 160px;
    }
    &.bridge-lamp10, &.bridge-lamp25, &.bridge-lamp40, &.bridge-lamp55{
      top: 180px;
    }
    &.bridge-lamp11, &.bridge-lamp26, &.bridge-lamp41, &.bridge-lamp56{
      top: 200px;
    }
    &.bridge-lamp12, &.bridge-lamp27, &.bridge-lamp42, &.bridge-lamp57{
      top: 220px;
    }
    &.bridge-lamp13, &.bridge-lamp28, &.bridge-lamp43, &.bridge-lamp58{
      top: 240px;
    }
    &.bridge-lamp14, &.bridge-lamp29, &.bridge-lamp44, &.bridge-lamp59{
      top: 260px;
    }
    &.bridge-lamp15, &.bridge-lamp30, &.bridge-lamp45, &.bridge-lamp60{
      top: 280px;
    }
  }
  .lamp-area{
    height: 280px;
  }
}

.house-all{
  align-items: normal;
}

.lamp-btns {
  width: 100%;
  padding-left: 120px;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  background: url("@/assets/images/img-center-border.png") no-repeat left top;
  background-size: 100% 100%;

  .item {
    width: 245px;
    text-align: center;

    .box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;

      div {
        border: 1px solid #E8EEFA;
      }

      .txt {
        width: 20px;
        height: 30px;
        line-height: 30px;
      }

      .img {
        width: 30px;
        height: 26px;
        text-align: center;
        padding-top: 4px;
      }
    }
    .net{
      margin-bottom: 10px;
    }

    .lamp-name {
      font-size: 18px;
      font-weight: 400;
      color: #336666;
      margin-right: 10px;
    }

    .status {
      width: 60px;
      height: 30px;
      line-height: 32px;
      text-align: center;
      border: 1px solid #eb1924;
      background-color: #eb1924;
      border-radius: 16px;
      font-size: 16px;
      font-weight: 400;
      color: #fff;
      display: inline-block;
    }

    .online {
      background-color: #57D695;
      border-color: #39CF7C;
    }
  }

  .lamp-bridge {
    width: 217px;
    margin-left: 18px;
    margin-right: 30px;
  }
}

.lamp-area-name {
  width: 104px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #366;
  position: absolute;
  left: 10px;
  bottom: 50px;
  z-index: 9;
  background: url("@/assets/images/img-area-bg.svg") no-repeat left top;
  background-size: 100% 100%;
}
</style>
